<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        a {
            text-decoration: none;
        }

        li {
            font-weight: 300 !important;
            text-decoration: underline;
            font-style: normal;
            color: red !important;
        }

        strong {
            /* font-weight: 300; */
        }



        .a {
            width: 200px;
            float: left;

            text-align: center;
        }


        .a1 {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            /* margin: auto; */

            float: left;
        }



        .nav li {
            float: left;
            border: 1px solid #000;
            margin-right: 20px;
            padding: 0 10px;
        }
    </style>
</head>

<body>

    <!-- 
        文本属性
            font-family  字体      (字体文件比较大  ，一般网页不建议使用特殊字体)
            font-weight  字重，加粗   300  500  700   lighter / normal / bold
            text-decoration  文字修饰,下划线    underline / line-through / none
            font-style  倾斜   normal / italic
            letter-spacing  字左右间距     负
            text-transform  大小写转换   uppercase   lowercase   capitalize
            text-indent   首行缩进   2em   em=一个字体大小    负
            color
            line-height  200px   2倍
            text-align

        特征   继承性    inherit



        居中
            margin:auto   只针对大盒子(div hh-h6 p  ul ol dl  li dt dd)
                没生效？子元素和父元素一样大   浮动了
            text-align    针对行内标签(小盒子 span  a  strong  b  del  u  ...)  写在父元素上
                没生效？子元素和父元素一样大   不能写给小盒子


        列表和背景属性
            列表标签是组合的
            结构和样式相同则使用列表
                导航  新闻列表   商品列表

            列表属性   --- 继承性
                list-style-type
                list-style-image
                list-style-position  

            列表中也可以嵌套列表

        背景属性
            background-color
            background-image
            background-repeat
            background-position:x y ;   可以为负数

            background

        
        图片和背景图的区别
            css预加载的作用 css先加载的   
            图片 img  向服务器发送请求

            图片压缩

            不变的使用背景图   变的使用img插入

            jpg   png  gif   webp (新的)


        盒模型
            margin
                margin:auto
                margin-left:auto ; margin-right:auto ;
            border: 1px dashed/solid/dotted  red ;
            padding  

            外边距和内边距的区分
                边框或者背景颜色以外使用外边距，以内使用内边距

            
            margin-top 传递问题      父元素写overflow:hidden


            盒模型的实际宽度计算 = 内容 + 内边距 + 边框 + 外边距
        

     -->


    <ul>
        <li>
            <a href="">哈哈</a>
            <strong>加粗</strong>
            <em>倾斜</em>
            <u></u>
            <del></del>
            hello hi world
        </li>
    </ul>

    <div class="a">
        <span>呵呵</span>
        <!-- <div class="a1">a1</div> -->
    </div>


    <ul class="nav">
        <li>呵呵</li>
        <li>呵呵呵</li>
        <li>哈哈哈哈哈</li>
    </ul>


    <!-- <ul>
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
    </ul> -->

</body>

</html>